<template>
  <div>
    <van-tabs v-model="active" color="#55c5ff">
      <van-tab title="待确认"></van-tab>
      <van-tab title="已确认"></van-tab>
    </van-tabs>
    <van-list
      v-model="list[active].loading"
      :finished="list[active].finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="message"
        v-for="(item,index) in list[active].list"
        :key="index"
        v-show="active == 0"
      >
        <div class="left">
          <p>姓名：{{item.username}}</p>
          <p>身份证后六位：{{item.idCardNo}}</p>
          <p>手机号：{{item.telphone}}</p>
          <p>办卡网点：{{item.bankName}}</p>
          <p>活动类型：市民卡一元购活动</p>
        </div>
        <div class="right">
          <p class="btn" @click="changestate(item.id,'1')">符合</p>
          <p class="btn1" @click="changestate(item.id,'3')">不符合</p>
        </div>
      </div>
      <div
        class="message1"
        :key="index"
        v-for="(item,index) in list[active].list"
        v-show="active == 1"
      >
        <div class="left">
          <p>姓名：{{item.username}}</p>
          <p>身份证后六位：{{item.idCardNo}}</p>
          <p>手机号：{{item.telphone}}</p>
          <p>办卡网点：{{item.bankName}}</p>
          <p>活动类型：市民卡一元购活动</p>
        </div>
        <div class="right">
          <p class="btn" v-if="item.isAuth == '1'">符合</p>
          <p class="btn1" v-if="item.isAuth == '3'">不符合</p>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { List, Cell, Tab, Tabs, Dialog, Toast } from 'vant';
export default {
  data() {
    return {
      active: 0,
      list: [
        {
          pageNum: 1,
          list: [],
          error: false,
          loading: false,
          finished: false,
          total: 0
        },
        {
          pageNum: 1,
          list: [],
          error: false,
          loading: false,
          finished: false,
          total: 0
        }
      ]
    };
  },
  components: {
    'van-list': List,
    'van-cell': Cell,
    'van-tabs': Tabs,
    'van-tab': Tab
  },
  methods: {
    changestate(id, type) {
      Dialog.confirm({
        title: '提示',
        message: `确定审核此用户为${type === '1' ? '符合' : '不符合'}状态`
      })
        .then(() => {
          this.$http
            .post('/oneYuanPurchase/updateCheckInfo', {
              id,
              isAuth: type
            })
            .then(res => {
              console.log(res);
              if (res.data.code === '0') {
                this.list[this.active].list = [];
                this.list[this.active].finished = false;
                this.list[this.active].loading = false;
                this.list[this.active].pageNum = 1;
                this.onLoad();
              } else {
                Toast(res.data.message);
              }
            });
        })
        .catch(() => {});
    },
    onLoad() {
      // 异步更新数据
      if (!this.list[this.active].finished) {
        setTimeout(() => {
          this.$http
            .post('/oneYuanPurchase/getCheckList', {
              type: this.active.toString(),
              pageNum: this.list[this.active].pageNum++
            })
            .then(res => {
              // console.log(res);
              // console.log(res.data.object.length);
              this.list[this.active].loading = false;
              this.list[this.active].list = res.data.object;
              // this.list[this.active].total = res.data.total;
              if (res.data.object.length < 10) {
                this.list[this.active].finished = true;
              }
            });
        }, 500);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.message {
  min-height: 301px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  display: flex;
  flex-direction: row;
  align-items: center;
  .left {
    width: 80%;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    p {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 30px;
      color: #010101;
    }
  }
  .right {
    width: 20%;
    .btn {
      width: 140px;
      height: 50px;
      background-color: #55c5ff;
      border-radius: 25px;
      text-align: center;
      line-height: 50px;
      font-size: 30px;
      color: #ffffff;
    }
    .btn1 {
      width: 140px;
      height: 50px;
      background-color: #ffffff;
      border-radius: 25px;
      border: solid 1px #55c5ff;
      margin-top: 30px;
      text-align: center;
      line-height: 50px;
      font-size: 30px;
      color: #55c5ff;
    }
  }
}
.message1 {
  min-height: 301px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  display: flex;
  flex-direction: row;
  align-items: center;
  .left {
    width: 80%;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    p {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 30px;
      color: #010101;
    }
  }
  .right {
    width: 20%;
    .btn {
      width: 140px;
      height: 50px;
      background-color: #e1e1e1;
      border-radius: 25px;
      text-align: center;
      line-height: 50px;
      font-size: 30px;
      color: #ffffff;
    }
    .btn1 {
      width: 140px;
      height: 50px;
      background-color: #ffffff;
      border-radius: 25px;
      border: solid 1px #fe0404;
      text-align: center;
      line-height: 50px;
      font-size: 30px;
      color: #fe0404;
    }
  }
}
tr td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table_list {
  table-layout: fixed;
  width: 100%;
  text-align: center;
  // border-collapse: collapse;
  // :nth-child(even){
  //   background-color: #fed8ce;
  // }
  :first-child {
    width: 10%;
    font-size: 26px;
    color: #3d3d3d;
  }
  :nth-child(2) {
    width: 25%;
    font-size: 26px;
    color: #3d3d3d;
  }
  :nth-child(3) {
    width: 25%;
    font-size: 26px;
    color: #3d3d3d;
  }
  tr {
    height: 72px;
    &:nth-child(2n) {
      background-color: #fed8ce;
    }
    td,
    th {
      border: 1px solid #e0e0e0;
      color: #666666;
      font-size: 26px;
    }
  }
}
.hwo_man {
  font-size: 26px;
  color: #282828;
  margin: 30px 28px;
  span {
    color: #fe0101;
  }
}
</style>
